<template>
  <!-- 发布文章弹框 -->
  <el-dialog v-model="dialogFormVisible" title="发布文章" width="500">
    <el-form :model="form">
      <el-form-item label="文章标题" :label-width="formLabelWidth">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="文章分类" :label-width="formLabelWidth">
        <el-select v-model="form.classify" placeholder="请选择">
          <el-option v-for="k in classify" :key="k.id" :label="k.className" :value="k.className" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          @click="dialogFormVisible = false; form = { name: '', classify: ''}">关闭</el-button>
        <el-button type="primary"
          @click="addBook()">
         发布
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 编辑的弹框 -->
  <el-dialog v-model="compile" title="修改文章" width="500">
    <el-form :model="compiledata">
      <el-form-item label="文章标题" :label-width="formLabelWidth">
        <el-input v-model="compiledata.name" />
      </el-form-item>

      <el-form-item label="文章分类" :label-width="formLabelWidth">
        <el-select v-model="compiledata.classify" placeholder="请选择">
          <el-option v-for="k in classify" :key="k.id" :label="k.className" :value="k.className" />
        </el-select>
      </el-form-item>

      <el-form-item label="发布状态" :label-width="formLabelWidth">
        <el-select v-model="compiledata.status" placeholder="请选择">
          <el-option label="已发布" value="已发布" />
          <el-option label="未发布" value="未发布" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="compile = false; compiledata = { name: '', classify: '', status: '' }">关闭</el-button>
        <el-button type="primary" @click="updateFc()">
          修改
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 删除文章弹框 -->
  <el-dialog v-model="delet"  width="500" draggable>
    <span style="color: red;">确认删除吗?</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="delet = false">关闭</el-button>
        <el-button type="primary" @click="deletePage()" >
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-card class="box-card">
    <!-- 表头 -->
    <template #header>
      <div class="card-header">
        <span>文章管理</span>
        <el-button type='primary' style="float: right;" plain @click="dialogFormVisible = true">发布文章</el-button>
      </div>
    </template>



    <div style="margin-top: 20px;"></div>
    <!-- 表单 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <!-- 文章分类 -->
      <el-form-item label="">
        <el-select v-model="formInline.classify" placeholder="请选择文章分类" clearable>
          <el-option v-for="k in classify" :key="k.id" :label="k.className" :value="k.className" />
        </el-select>
      </el-form-item>
      <!-- 发布状态 -->
      <el-form-item label="">
        <el-select v-model="formInline.status" placeholder="请选择发布状态" clearable>
          <el-option label="已发布" value="已发布" />
          <el-option label="未发布" value="未发布" />
        </el-select>
      </el-form-item>
      <!-- 搜索按钮 -->
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="文章标题" />
      <el-table-column prop="classify" label="分类" />
      <el-table-column prop="time" label="发布时间" />
      <el-table-column prop="status" label="状态" />
      <el-table-column label="操作" width='200px'>
        <!-- 编辑删除按钮 这里默认插槽可以获取到本行数据-->
        <template #default={row}>
          <el-row>
            <el-button type="primary" :icon="Edit" circle @click="opencompile(row)"></el-button>
            <el-button type="danger" :icon="Delete" circle @click = "id = row.id;delet = true"></el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="demo-pagination-block kl">
      <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[5,10,20]"
        :small="small" :disabled="disabled" :background="background" layout="jumper,total, sizes, prev, pager, next "
        :total="totle" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import {instance} from '../../utils/MyRequeest'

  /* 删除文章 */
  let id:number;
  const delet = ref(false)
  const deletePage =() => {
    instance({
      method:'delete',
      url:`page/deletePage/${id}`,
    }).then((res)=>{
      if(res.data.code === 1){
        AllPage()
        ElMessage({
          message: '删除成功',
          type: 'success',
        })
        delet.value = false
        
      }
    })
  }
  

/* 查询全部文章 */
const AllPage =(() =>{
  instance({
    method:'get',
    url:'page/page',
    params:{
      page:currentPage4.value,
      pagesize:pageSize4.value,
      status:formInline.value.status,
      classify:formInline.value.classify
    }
  }).then((res)=>{
    tableData.value = res.data.data.pageList 
totle.value = res.data.data.totle
  })
})
/* 添加文章 */
function addBook() {
  instance({
    method:'post',
    url:'page/AddBook',
    data:{
      name:form.value.name,
      classify:form.value.classify
    }
  }).then(()=>{
    AllPage()
    form.value = {name:'',classify:''}
    ElMessage.success("添加成功")
    dialogFormVisible.value = false
  })

}
/* 分类的数据 */
let classify = ref([])

instance({
    method:'get',
    url:'/page',}).then((res) =>{
      classify.value = res.data.data
    })

/* 表单 */
const formInline = ref({
  classify: '',
  status: '',
})
const onSubmit = () => {
  instance({
    method:'get',
    url:'page/page',
    params:{
      page:currentPage4.value,
      pagesize:pageSize4.value,
      status:formInline.value.status,
      classify:formInline.value.classify
    }
  }).then((res)=>{
tableData.value = res.data.data.pageList 
totle.value = res.data.data.totle
  })
}
// 引入element-plus的图标
import {
  Delete,
  Edit,
} from '@element-plus/icons-vue'
// 表格数据
const tableData = ref([])
//分页数据
import { ref } from 'vue'
/* 默认页数 */
const currentPage4 = ref(1)
/* 默认页面大小 */
const pageSize4 = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const totle = ref(1000)
/* 每页页数改变调用 */
const handleSizeChange = () => {
  console.log(pageSize4.value)
  instance({
    method:'get',
    url:'page/page',
    params:{
      page:currentPage4.value,
      pagesize:pageSize4.value,
      status:formInline.value.status,
      classify:formInline.value.classify
    }
  }).then((res)=>{
tableData.value = res.data.data.pageList 
totle.value = res.data.data.totle
  })
}
/*  页数改变调用*/
const handleCurrentChange = () => {
  instance({
    method:'get',
    url:'page/page',
    params:{
      page:currentPage4.value,
      pagesize:pageSize4.value,
      status:formInline.value.status,
      classify:formInline.value.classify
    }
  }).then((res)=>{
tableData.value = res.data.data.pageList 
totle.value = res.data.data.totle
  })
}
instance({
    method:'get',
    url:'page/page',
    params:{
      page:currentPage4.value,
      pagesize:pageSize4.value,
      status:formInline.value.status,
      classify:formInline.value.classify
    }
  }).then((res)=>{
tableData.value = res.data.data.pageList 
totle.value = res.data.data.totle
  })







/* 发布文章弹框数据 */
let dialogFormVisible = ref(false)
const formLabelWidth = '140px'
let form = ref({
  name: '',
  classify: '',
})
/* 修改文章的弹框数据 */
let compile = ref(false)
let compiledata = ref({
  id:'',
  name: '',
  classify: '',
  status: ''
})
/* 这个数据就是修改数据用的 */
function updateFc() {
  instance({
    method:'put',
    url:'/page/update',
    data:{
      id:compiledata.value.id,
      name:compiledata.value.name,
      classify:compiledata.value.classify,
      status:compiledata.value.status
    }
  }).then(()=>{
    AllPage()
    ElMessage.success("修改成功")
  compile.value = false

  })
}
/* 修改文章回显数据 */
const opencompile = (x: any) => {
  compile.value = true
  instance.get(`/page/selectbyid/${x.id}`)
  .then((res) => {
    console.log(res.data.data);
    
    compiledata.value = res.data.data
  })
}
</script>

<style scoped>
/* 分页 */
.kl {
  margin-top: 20px;
  float: right;
  margin-bottom: 30px;
}

/* 表单 */
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>